import React from 'react'
//过渡动画
import {CSSTransition} from "react-transition-group";
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoItem,
    SearchInfoList
} from "./style";
//connect 是帮助我们将组件和store建立连接的方法
import {connect} from 'react-redux';
import {actionCreators} from './store';
import {actionCreators as  loginActionCreators} from '../../pages/login/store'
import {Link} from 'react-router-dom'

class Header extends React.Component {
    render() {
        const {focused, handleInputFocus, handleInputBlur, list, login,handleSignOut} = this.props;
        return (
            <HeaderWrapper>
                <div className="width-limit">
                    <Link to="/">
                        <Logo/>
                    </Link>
                    <Nav>
                        <NavItem className='left active'>首页</NavItem>
                        <NavItem className='left'>下载App</NavItem>
                        {login ? <NavItem className='right' onClick={handleSignOut}>退出</NavItem> :
                            <Link to="/login"><NavItem className='right'>登录</NavItem></Link>
                        }
                        <NavItem className='right'><span className="iconfont">&#xe636;</span></NavItem>
                        <SearchWrapper>
                            <CSSTransition
                                in={focused}//控制入场和出场动画
                                timeout={200} //控制动画时间
                                classNames='slide'>
                                <NavSearch className={focused ? 'focused' : ''}
                                           onFocus={() => handleInputFocus(list)}
                                           onBlur={handleInputBlur}>
                                </NavSearch>
                            </CSSTransition>
                            <span className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe61b;</span>
                            {this.getListArea()}
                        </SearchWrapper>
                    </Nav>
                    <Addition>
                        <Link to="/write"><Button className='writing'><span className="iconfont">&#xe61d;</span>写文章</Button></Link>
                        <Button className='reg'>注册</Button>
                    </Addition>
                </div>
            </HeaderWrapper>
        )
    }

    getListArea() {
        const {focused, list, page, totalPage, mouseIn, handleMouseEnter, handleMouseLeave, handleChangePage} = this.props;
        //toJS能把immutable数组转换为普通JS数组
        const newList = list.toJS();
        const pageList = [];
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        if (focused || mouseIn) {
            return (
                <SearchInfo
                    onMouseEnter={handleMouseEnter}
                    onMouseLeave={handleMouseLeave}>
                    <SearchInfoTitle>热门搜索
                        <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
                            <span ref={(icon) => {
                                this.spinIcon = icon
                            }} className="iconfont spin">&#xe851;</span>换一批</SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>
            )
        } else {
            return null;
        }
    }
}

//mapStateToProps：组件与store作连接时store中的数据如何映射到Props上
const mapStateToProps = (state) => {
    return {
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        login: state.getIn(['login', 'login'])
    }
};
//mapDispatchToProps:组件与store作连接时，如果组件改变store中的数据会调用dispatch方法
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            //避免无意义的请求发送，提升组件性能
            (list.size === 0) && dispatch(actionCreators.getList());
            dispatch(actionCreators.searchFocus());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.mouseLeave())
        },
        handleChangePage(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10)
            } else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1));
            } else {
                dispatch(actionCreators.changePage(1));
            }
        },
        handleSignOut(){
            dispatch(loginActionCreators.signOut())
        }
    }
};
//connect 是帮助我们将组件和store建立连接的方法
export default connect(mapStateToProps, mapDispatchToProps)(Header)
